<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script>window.GAUGES_NO_AUTO_INIT = true;</script>
    <script src="../gauge.min.js"></script>
    <style>body {
        padding: 0;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>
<button onclick="initManually()">Init gauges</button>
<hr>

<canvas  data-type="radial-gauge"
         data-min-value="0"
         data-max-value="360"
         data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
         data-minor-ticks="22"
         data-ticks-angle="360"
         data-start-angle="180"
         data-stroke-ticks="false"
         data-highlights="false"
         data-color-plate="#222"
         data-color-major-ticks="#f5f5f5"
         data-color-minor-ticks="#ddd"
         data-color-numbers="#ccc"
         data-color-needle="rgba(240, 128, 128, 1)"
         data-color-needle-end="rgba(255, 160, 122, .9)"
         data-value-box="false"
         data-value-text-shadow="false"
         data-color-circle-inner="#fff"
         data-color-needle-circle-outer="#ccc"
         data-needle-circle-size="15"
         data-needle-circle-outer="false"
         data-needle-type="line"
         data-needle-start="75"
         data-needle-end="99"
         data-needle-width="3"
         data-borders="true"
         data-border-inner-width="0"
         data-border-middle-width="0"
         data-border-outer-width="10"
         data-color-border-outer="#ccc"
         data-color-border-outer-end="#ccc"
         data-color-needle-shadow-down="#222"
         data-animation-target="plate"
         data-animation-duration="1500"
         data-animation-rule="linear"
         data-width="500"
         data-height="500"
         data-units="ᵍ"
         data-value="0"
></canvas>

<canvas data-type="radial-gauge"
        data-width="500"
        data-height="500"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#33a"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="false"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="line"
        data-needle-start="75"
        data-needle-end="99"
        data-needle-width="3"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-animation-target="plate"
        data-units="ᵍ"
        data-title="DIRECTION"
        data-font-title-size="19"
        data-color-title="#f5f5f5"
        data-animation-duration="1500"
        data-value="45"
        data-animate-on-init="true"
></canvas>

<script>
function initManually() {
    var collection = document.getElementsByTagName('canvas');

    for (var i = 0, s = collection.length; i < s; i++) {
        BaseGauge.fromElement(collection[i]);
    }
}
</script>
</body>
</html>
